<!DOCTYPE html>
<html>

	<head>
		<title>美食筛选页面</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../lib/weui.min.css">
		<link rel="stylesheet" href="../css/jquery-weui.css">
		<link rel="stylesheet" type="text/css" href="../css/base.css" />
		<link rel="stylesheet" type="text/css" href="css/column.css" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css"/>
	</head>

	<body ontouchstart>
		<div>
			<div id="head">
				<!--<input type="button" name="" id="return" value="返回" />-->
				&nbsp;<a href="../index/index.html" style="color: white;"><span class="iconfont icon-back"></span> 美食</a>
			</div>

			<div id="content">
				<div id="position">      
					<div class="weui-tab">
						<div class="weui-navbar">
							<a class="weui-navbar__item " href="#tab1">
								美食
							</a>
							<a class="weui-navbar__item" href="#tab2">
								排序
							</a>
							<a class="weui-navbar__item" href="#tab3">
								筛选
							</a>
						</div>
						<div class="weui-tab__bd" style="z-index: 20;">
							<div id="tab1" class="weui-tab__bd-item">
								<div id="tab" class="j_tab fl">
									<ul class="ul">
										<li><span class="wu_bg1"></span>快餐便当</li>
										<li><span class="wu_bg2"></span>特色菜系</li>
										<li><span class="wu_bg3"></span>异国料理</li>
										<li><span class="wu_bg4"></span>小吃夜宵</li>
									</ul>
								</div>
								<div class="fr">
									<div class="div" style="display: none;">
										<p>全部快餐便当</p>
										<p>简餐</p>
										<p>盖浇饭</p>
										<p>米粉面馆</p>
										<p>麻辣烫</p>
										<p>香锅砂锅</p>
										<p>黄焖鸡米饭</p>
										<p>饺子混沌</p>
										<p>汉堡</p>
										<p>煲仔饭</p>
										<p>包子粥铺</p>
										<p>生煎锅贴</p>
										<p>烧腊饭</p>
										<p>咖喱饭</p>
									</div>
									<div class="div" style="display: none;">
										<p>全部特色菜系</p>
										<p>其他菜系</p>
										<p>川湘菜</p>
										<p>海鲜</p>
										<p>江浙菜</p>
										<p>火锅烤鱼</p>
										<p>奥菜</p>
										<p>东北菜</p>
										<p>西北菜</p>
										<p>鲁菜</p>
										<p>云南菜</p>
										<p>新疆菜</p>
									</div>
									<div class="div" style="display: none;">
										<p>全部异国料理</p>
										<p>披萨意面</p>
										<p>日韩料理</p>
										<p>西餐</p>
										<p>东南亚菜</p>
									</div>
									<div class="div" style="display: none;">
										<p>全部小吃夜宵</p>
										<p>地方小吃</p>
										<p>鸭脖卤味</p>
										<p>小龙虾</p>
										<p>炸鸡炸串</p>
										<p>零食</p>
										<p>烧烤</p>
									</div>
								</div>

							</div>
							<div id="tab2" class="weui-tab__bd-item">
								<p><span class="wu_bgcol1"></span>智能排序</p>
								<p><span class="wu_bgcol2"></span>距离最近</p>
								<p><span class="wu_bgcol3"></span>销量最高</p>
								<p><span class="wu_bgcol4"></span>起送价最低</p>
								<p><span class="wu_bgcol5"></span>配送速度最快</p>
								<p><span class="wu_bgcol6"></span>人气最高</p>
							</div>
							<div id="tab3" class="weui-tab__bd-item">
								<div class="load"></div>
								<div class="load2"></div>
							</div>
						</div>
					</div>

					<!--商家信息-->
					<div id="shangjia">
						<p class="h40"></p>
						<div class="weui-panel weui-panel_access" v-for="item in products" style="width: 100%;" onclick="wu_alinck(this)" id="{{item.id}}">
							<div class="weui-panel__bd" style="width: 100%;">
								<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg" style="width: 100%;">
									<div class="weui-media-box__hd">
										<img class="weui-media-box__thumb" :src="item.attributes.img">
									</div>
									<div class="weui-media-box__bd">
										<h4 class="weui-media-box__title">{{item.attributes.name}}</h4>
										<p>
											4.7 月售300单
										</p>
										<p>￥35元起|配送费￥2元|￥16/人<span style="float: right;">2.24km|30分钟</span></p>
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>

			</div>

		</div>
		<script src="../lib/jquery-2.1.4.js"></script>
		<script src="../js/jquery-weui.min.js"></script>
		<script src="js/zujian.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../js/city-picker.js" charset="utf-8"></script>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="//cdn1.lncld.net/static/js/2.1.4/av-min.js"></script>
		<script type="text/javascript">
			$(".weui-navbar__item").click(function() {
				if($(".weui-tab__bd")[0].style.zIndex == 20 && $(".weui-tab__bd")[0].style.opacity == 1) {
					$(".weui-tab__bd")[0].style.zIndex = 1;
					$(".weui-tab__bd")[0].style.opacity = 0;
				} else {
					$(".weui-tab__bd")[0].style.zIndex = 20;
					$(".weui-tab__bd")[0].style.opacity = 1;
				}
			});
				function wu_alinck(t) {
				location.href = "../Business-details/Business-details.html?index=" + t.getAttribute("id");
			}
			var vue = new Vue({
				el: "body",
				data: {
					products: "",
				},
				created: function() {
					var APP_ID = '9etyUbhi95RBWTaoLBTyW5HP-gzGzoHsz';
					var APP_KEY = '6IkehXVEvUELlpo1SAf1c8PR';
					AV.init({
						appId: APP_ID,
						appKey: APP_KEY
					});
					var mthis = this;

					var query = new AV.Query('Business');
					if(mthis.geturl() == 1) {
						query.equalTo('type', "美食");
					};
					if(mthis.geturl() == 2) {
						query.equalTo('type', "饮品");
					};
					if(mthis.geturl() == 3) {
						query.equalTo('type', "商品超市");
					};
					if(mthis.geturl() == 4) {
						query.equalTo('type', "果蔬生鲜");
					};
					if(mthis.geturl() == 5) {
						query.equalTo('type', "新店特惠");
					};
					if(mthis.geturl() == 6) {
						query.equalTo('type', "准时达");
					};
					if(mthis.geturl() == 7) {
						query.equalTo('type', "下午茶");
					};
					if(mthis.geturl() == 8) {
						query.equalTo('type', "土豪推荐");
					};
					query.find().then(function(products) {
						mthis.products = products;
					}).catch(function(error) {
						alert(JSON.stringify(123));
					});
				},
				methods: {
					geturl: function() {
						url = location.search;
						c_start = url.indexOf(name + "=")
						if(c_start != -1) {
							c_start = c_start + name.length + 1
							c_end = url.indexOf("&", c_start);
							if(c_end == -1) c_end = url.length;
							return unescape(url.substring(c_start, c_end));
						}
						return "";
					},
					
				},
			});
		</script>
	</body>

</html>